<template>
	<div class="home">
		<section class="part part1">
			<aside class="part1L">
				<dd class="txt txt1">姓名：乔飞</dd>
				<dd class="txt txt1">求职意向：前端/全栈攻城狮</dd>
				<dd class="txt txt1">工作时间：10年</dd>
			</aside>
			<aside class="part1C">
				<img src="@/assets/head.jpg" alt />
			</aside>
			<aside class="part1R">
				<dd class="txt txt1">生日：1993.10.08</dd>
				<dd class="txt txt1">联系方式：18968426340</dd>
				<dd class="txt txt1">邮箱：1085370797@qq.com</dd>
			</aside>
		</section>
		<div class="lines" style="margin:60px auto 0px;">
			<span class="line"></span>
			<span class="dot"></span>
			<span class="line"></span>
		</div>
		<section class="part part2">
			<h3 class="title">技术栈</h3>
			<div class="content">
				<aside class="partItem partItem1">
					<div class="tags">
						<span class="tag">HTML5</span>
						<span class="tag">SVG</span>
						<span class="tag">webStorage</span>
						<span class="tag">drag&drap</span>
					</div>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-html" />
					</svg>
				</aside>
				<aside class="partItem partItem2">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-css1" />
					</svg>
					<div class="tags">
						<span class="tag">transform</span>
						<span class="tag">flexBox</span>
						<span class="tag">@media</span>
						<span class="tag">@keyframes</span>
						<span class="tag">less&sass</span>
					</div>
				</aside>
				<aside class="partItem partItem3">
					<div class="tags">
						<span class="tag">VueJs</span>
						<span class="tag">nuxtJs</span>
						<span class="tag">jQuery</span>
						<span class="tag">Es6,7+</span>
						<span class="tag">nodeJS</span>
						<span class="tag">webpack</span>
						<span class="tag">ElementUI</span>
						<span class="tag">IviewUi</span>
						<span class="tag">vux</span>
						<span class="tag">echarts</span>
						<span class="tag">d3.js</span>
					</div>
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-js" />
					</svg>
				</aside>
				<aside class="partItem partItem4">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-gongju2" />
					</svg>
					<div class="tags">
						<span class="tag">weTouch</span>
						<span class="tag">vsCode</span>
						<span class="tag">svg</span>
						<span class="tag">gitHub</span>
						<span class="tag">git</span>
						<span class="tag">nginx</span>
						<span class="tag">docker</span>
						<span class="tag">mongodb</span>
						<span class="tag">mongoose</span>
						<span class="tag">nestjs</span>
						<span class="tag">typeScript</span>
					</div>
				</aside>
			</div>
		</section>
		<section class="part part3" style="margin-top: 100px;">
			<h3 class="title">工作经历</h3>
			<div class="timeLine">
				<aside class="timeItem itemR">
					<div class="time">
						2021 ~ 今
						<span class="dott"></span>
					</div>
					<div class="container">
						<h4>公司：浙江华瀛科技有限公司</h4>
						<p class="content">负责探伤仪，智能锁小程序等项目开发</p>
					</div>
					<span class="line"></span>
				</aside>
				<aside class="timeItem itemL">
					<div class="time">
						2018-06-4 ~ 2021
						<span class="dott"></span>
					</div>
					<div class="container">
						<h4>公司：杭州中奥科技有限公司</h4>
						<p class="content">主要负责公安项目开发，期间参与杭州市公安局AI警情、情报研判、合成作战等项目的开发工作。</p>
					</div>
					<span class="line"></span>
				</aside>
				<!-- <aside class="timeItem itemR">
          <div class="time">
            2018-05-22 ~ 2019-03
            <span class="dott"></span>
          </div>
          <div class="container">
            <h4>飞戎机器人科技有限公司</h4>
            <p class="content">主要负责经编机项目开发，经编机管理系统和库蚂蚁聊天小程序。</p>
          </div>
          <span class="line"></span>
        </aside> -->
				<aside class="timeItem itemR">
					<div class="time">
						2016-10 ~ 2018-05
						<span class="dott"></span>
					</div>
					<div class="container">
						<h4>浙江鸿程系统计算机有限公司</h4>
						<p class="content">主要负责杭州市最多跑一次项目。</p>
					</div>
					<span class="line"></span>
				</aside>
				<aside class="timeItem itemL">
					<div class="time">
						2015-10 ~ 2016-10
						<span class="dott"></span>
					</div>
					<div class="container">
						<h4>艾括网络科技有限公司</h4>
						<p class="content">主要负责杭州各大画室的网站开发</p>
					</div>
					<span class="line"></span>
				</aside>
			</div>
		</section>
		<section class="part part4" style="margin-top: 100px;">
			<h3 class="title">主要项目</h3>
			<div class="article">
				<section class="left">
					<div class="project">
						<h4 class="tit">探伤仪</h4>
						<dd class="msgList">
							<span class="label">简介：</span>
							<span class="value">探测金属及瓷器裂纹的PWA系统；负责前端独立独立开发</span>
						<dd class="msgList">
							<span class="label">技术：</span>
							<span class="value">vite+vue3+pwa</span>
						</dd>
						</dd>
						<dd class="msgList">
							<span class="label">公司：</span>
							<span class="value">浙江华瀛科技有限公司</span>
						</dd>
					</div>
					<div class="project">
						<h4 class="tit">AI警情、合成作战、情报信息平台、智能碰撞...</h4>
						<dd class="msgList">
							<span class="label">简介：</span>
							<span class="value">一个实时反馈警情案件消息内容的警用系统。依靠大数据分析以及模型推算将案件相关信息及时反馈给民警工作人员。</span>
						</dd>
						<dd class="msgList">
							<span class="label">公司：</span>
							<span class="value">中奥科技</span>
						</dd>
					</div>
					<div class="project">
						<h4 class="tit">智能搜索</h4>
						<dd class="msgList">
							<span class="label">简介：</span>
							<span class="value">一个可以从公安大数据库中检索线索相关信息的产品。</span>
						</dd>
						<dd class="msgList">
							<span class="label">公司：</span>
							<span class="value">中奥科技</span>
						</dd>
						<!-- <article class="articleMsg">一个可以从公安大数据库中检索线索相关信息的产品。</article> -->
					</div>
					<div class="project">
						<h4 class="tit">移+云应用</h4>
						<dd class="msgList">
							<span class="label">简介：</span>
							<span class="value">政务服务平台。</span>
						</dd>
						<dd class="msgList">
							<span class="label">公司：</span>
							<span class="value">鸿程系统</span>
						</dd>
						<dd class="msgList">
							<span class="label">技术：</span>
							<span class="value">vue全家桶,ElementUI,vux</span>
						</dd>
						<dd class="msgList">
							<span class="label">网址：</span>
							<a href="https://mobile.zjhcsoft.com:8002/terminalServer/szf/weblogin?url=https://mobile.zjhcsoft.com:8002/terminalWeb/user/index.do&token=-1&AccessType=Web&code=-1"
								class="value">https://mobile.zjhcsoft.com:8002/terminalServer</a>
						</dd>
					</div>
					<div class="project">
						<h4 class="tit">中国美术学院-手工艺术学院（官网）</h4>
						<dd class="msgList">
							<span class="label">简介：</span>
							<span class="value">手工艺术学院官网。</span>
						</dd>
						<dd class="msgList">
							<span class="label">公司：</span>
							<span class="value">艾括网络科技有限公司</span>
						</dd>
						<dd class="msgList">
							<span class="label">技术：</span>
							<span class="value">jQuery,Bootstrap</span>
						</dd>
						<dd class="msgList">
							<span class="label">网址：</span>
							<a class="value" href="http://www.sgysxy.com">http://www.sgysxy.com</a>
						</dd>
					</div>
				</section>
				<section class="right">
					<!-- <div class="project">
            <h4 class="tit">库蚂蚁沟通</h4>
            <dd class="msgList">
              <span class="label">简介：</span>
              <span class="value">一款在线沟通 需求，管理，报价系统。包括PC端和小程序。</span>
            </dd>
            <dd class="msgList">
              <span class="label">公司：</span>
              <span class="value">飞戎科技</span>
            </dd>
            <dd class="msgList">
              <span class="label">技术：</span>
              <span class="value">touchWX,WebSocket,vue全家桶</span>
            </dd>
          </div> -->
					<div class="project">
						<h4 class="tit">web3量化交易系统</h4>
						<dd class="msgList">
							<span class="label">简介：</span>
							<span class="value">web3自动交易系统，负责全栈开发</span>
						</dd>
						<dd class="msgList">
							<span class="label">公司：</span>
							<span class="value">浙江华瀛科技有限公司</span>
						</dd>
						<dd class="msgList">
							<span class="label">技术：</span>
							<span class="value">前端：vite+vue3+pwa; 后端：nestjs+mongodb</span>
						</dd>
					</div>
					<div class="project">
						<h4 class="tit">移+云平台</h4>
						<dd class="msgList">
							<span class="label">简介：</span>
							<span class="value">政务服务平台。</span>
						</dd>
						<dd class="msgList">
							<span class="label">公司：</span>
							<span class="value">鸿程系统</span>
						</dd>
						<dd class="msgList">
							<span class="label">技术：</span>
							<span class="value">vue全家桶,ElementUI,vux</span>
						</dd>
						<dd class="msgList">
							<span class="label">网址：</span>
							<a class="value" href="http://mobile.zjhcsoft.com/">http://mobile.zjhcsoft.com/</a>
						</dd>
					</div>
					<div class="project">
						<h4 class="tit">浙江政务服务网</h4>
						<dd class="msgList">
							<span class="label">简介：</span>
							<span class="value">政务服务平台。</span>
						</dd>
						<dd class="msgList">
							<span class="label">公司：</span>
							<span class="value">鸿程系统</span>
						</dd>
						<dd class="msgList">
							<span class="label">技术：</span>
							<span class="value">vue全家桶,ElementUI,vux</span>
						</dd>
						<dd class="msgList">
							<span class="label">网址：</span>
							<a class="value" href="http://www.zjzwfw.gov.cn/">http://www.zjzwfw.gov.cn/</a>
						</dd>
					</div>
					<div class="project">
						<h4 class="tit">白塔岭画室</h4>
						<dd class="msgList">
							<span class="label">公司：</span>
							<span class="value">鸿程系统</span>
						</dd>
						<dd class="msgList">
							<span class="label">简介：</span>
							<span class="value">白塔岭画室艺考培训学校官网。</span>
						</dd>
						<dd class="msgList">
							<span class="label">技术：</span>
							<span class="value">jQuery,Bootstrap</span>
						</dd>
						<dd class="msgList">
							<span class="label">网址：</span>
							<a class="value" href="http://www.btl2002.com">http://www.btl2002.com</a>
						</dd>
					</div>
				</section>
			</div>
		</section>
		<section class="part part5">
			<h3 class="title">个人简介</h3>
			<article class="article">
				<section class="left">
					<dd class="title">经验：</dd>
					<p>
						1、熟练使用webpack+vue全家桶开发web应用，熟练使用dclude开发微信小程序。
						<br />2、可使用node.js,express,nestjs,mongodb开发后端接口。
						<br />4、熟练使用docker,nginx部署项目
						<br />3、熟练使用elementUI,IviewUi,vux等UI库
						<br />4、熟练使用nuxt.js和vue-cli3及vite脚手架
					</p>
				</section>
				<section class="right">
					<dd class="title">简介：</dd>
					<p>本人擅长的中小型网站及H5，小程序开发，且可以独立全栈开发，从前端vue系列到后端nestjs系列和部署docker compose+nginx有着非常熟练的经验。</p>
					<a target="_blank" href="https://dev.to/tingshuai">个人日志：https://dev.to/tingshuai</a>
				</section>
			</article>
		</section>
		<div class="lines">
			<span class="line"></span>
			<span class="dot"></span>
			<span class="line"></span>
		</div>
	</div>
</template>

<script>
// @ is an alias to /src

export default {
	name: "Home",
	components: {}
};
</script>
<style lang="less" scoped>
@blue: #1296db;
@gray: #4e4e4e;
@width: 900px;

.home {
	display: flex;
	flex-direction: column;
	padding: 60px 0px 20px 0;
	font-size: 14px;
	font-family: "微软雅黑";
	height: 100%;
	overflow: auto;

	.part {
		display: flex;

		.title {
			font-size: 16px;
			margin: 18px 0;
			text-align: center;
		}
	}

	.part1 {
		align-items: center;
		max-width: @width;
		margin: 0 auto;

		.part1L,
		.part1C,
		.part1R {
			display: flex;

			.txt {
				margin-top: 4px;
			}
		}

		.part1L,
		.part1R {
			flex: 1;
			flex-direction: column;
			white-space: nowrap;

			.txt {
				display: flex;
				flex-wrap: nowrap;
				width: fit-content;
			}
		}

		.part1L {
			align-items: flex-end;
		}

		.part1C {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			overflow: hidden;
			justify-content: center;
			align-items: center;
			flex: none;
			margin: 0 18px;

			img {
				width: auto;
				height: 100%;
			}
		}
	}

	.part2 {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 20px;

		.content {
			max-width: @width;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;

			.icon {
				width: 50px;
				height: 45px;
				flex: none;
			}

			.partItem {
				display: flex;
				align-items: flex-start;
			}

			.partItem1,
			.partItem3 {
				.tags {
					justify-content: flex-end;
				}
			}

			.partItem1,
			.partItem13 {}

			.tags {
				display: flex;
				flex-wrap: wrap;
				min-height: 100px;
				align-content: flex-start;
				flex: 1;

				.tag {
					margin-top: 8px;
					border: 1px solid #ddd;
					height: fit-content;
					padding: 4px 4px;
					display: flex;
					align-items: flex-start;
					justify-content: flex-end;
					align-content: flex-start;
					font-size: 12px;
					margin-left: 12px;
					border-radius: 4px;
				}
			}
		}
	}

	.part3 {
		text-align: left;
		flex-direction: column;
		margin-top: 60px;
		align-items: center;

		.timeLine {
			flex-direction: column;
			display: flex;
			flex: 1;
			max-width: @width;
			width: 100%;

			.timeItem {
				max-width: 50%;

				span.line {
					content: "";
					width: 1px;
					background-color: #ddd;
					height: 100%;
					position: absolute;
					top: 5px;
					z-index: 0;
				}

				&:first-child {
					span.line {
						top: 5px;
					}
				}

				&:last-child {
					span.line {
						display: none;
					}
				}

				.time {
					position: relative;
					z-index: 10;
					color: #0999e4;
					font-weight: bold;

					span.dott {
						content: "";
						position: absolute;
						width: 10px;
						height: 10px;
						top: 4px;
						border-radius: 50%;
						background-color: @blue;
					}
				}

				.container {
					position: relative;

					>h4 {
						margin-top: 8px;
					}

					.content {
						padding: 4px 0;
						font-size: 12.5px;
						line-height: 1.8em;
						color: @gray;
					}
				}

				&.itemL {
					position: relative;

					h4 {
						text-align: right;
						// color: @blue;
					}

					.time {
						text-align: right;
						padding-right: 15px;

						span.dott {
							right: -5px;
						}
					}

					.container {
						padding-right: 15px;

						.content {
							text-align: right;
						}
					}

					span.line {
						right: 0;
					}
				}

				&.itemR {
					position: relative;
					left: 50%;

					.time {
						padding-left: 20px;

						span.dott {
							left: -5px;
						}
					}

					.container {
						padding-left: 20px;
					}

					span.line {
						left: -1px;
					}
				}
			}
		}
	}

	.part4 {
		flex-direction: column;
		margin-top: 60px;
		align-items: center;
		position: relative;

		div.article {
			display: flex;
			max-width: @width;

			section.left,
			section.right {
				width: 50%;
				flex: none;
				display: flex;
				flex-direction: column;

				div.project {
					display: flex;
					flex-direction: column;
					text-align: left;
					width: 100%;
					flex: none;
					margin: 26px 0;

					.msgList {
						margin-bottom: 10px;

						a.value {
							color: #0999e4;
						}
					}

					.articleMsg {
						font-size: 12px;
						line-height: 2em;
						color: #474747;
					}

					h4.tit {
						text-align: center;
						padding-bottom: 16px;
					}
				}
			}

			section.left {
				padding-right: 40px;
			}

			section.right {
				padding-left: 40px;
			}

			&::after {
				content: "";
				position: absolute;
				left: 50%;
				width: 1px;
				height: 90%;
				background-color: #ddd;
			}
		}
	}

	.part5 {
		flex-direction: column;
		align-items: center;
		margin-top: 40px;
		page-break-before: always;

		h3.title {
			margin-bottom: 50px;
		}

		.article {
			display: flex;
			max-width: @width;
			position: relative;
			min-height: 150px;

			&::after {
				content: "";
				position: absolute;
				left: 50%;
				width: 1px;
				height: 90%;
				background-color: #ddd;
			}
		}

		section.left,
		section.right {
			width: 50%;
			flex: none;
			display: flex;
			flex-direction: column;

			.title {
				text-align: left;
				font-size: 14px;
				margin: 12px 0 6px 0;
			}

			p {
				text-align: left;
				line-height: 1.8em;
				text-align: justify;
			}
		}

		section.left {
			padding-right: 40px;
		}

		section.right {
			padding-left: 40px;
			text-align: left;
		}
	}

	.lines {
		display: flex;
		justify-content: center;
		margin: 100px auto 30px;

		.line {
			height: 1px;
			width: 50px;
			background-color: #ddd;
		}

		.dot {
			height: 4px;
			width: 4px;
			border-radius: 50%;
			background-color: #ddd;
			margin: 0 14px;
		}
	}
}

h1,
h2,
h3,
h4,
h5 {
	page-break-after: avoid;
}
</style>
